<template>
	<view class="page">
		<!-- 页面头部内容开始 -->
		<vk-data-page-header
			:title="page.title"
			show-back
			@back="pageBack"
		></vk-data-page-header>
		<!-- 页面头部内容结束 -->
		<view class="page-body">
			<!-- 页面主体内容开始  max-height="inherit"-->
			<vk-data-form
				ref="form1"
				v-model="form1"
				:rules="formData1.rules"
				:action="formData1.action"
				:form-type="formData1.formType"
				:columns='formData1.columns'
				label-width="140px"
				max-height="calc(100vh - 210px)"
				:footer-show="false"
				:loading.sync="formData1.loading"
				:before-action="formData1.beforeAction"
				@success="formSuccess"
			>

				<!-- 优惠规则 -->
				<template v-slot:coupon_rule="{ form, keyName }">
					<view style="margin-left: 60px;">
						<view style="color: #606266;" v-if="form.type === 1">
							<text>优惠力度：</text>
							<text>满</text>
							<text style="margin-left: 10px;"><vk-data-input-money v-model="form[keyName].min_amount" :precision="0" width="140px" :clearable="false" placeholder="多少" rightText="元" :disabled="options.mode === 'update'"/></text>
							<text style="margin-left: 10px;">，减</text>
							<text style="margin-left: 10px;"><vk-data-input-money v-model="form[keyName].discount_amount" :precision="0" width="140px" :clearable="false" placeholder="多少" rightText="元" :disabled="options.mode === 'update'"/></text>
						</view>
						<view style="color: #606266;" v-else-if="form.type === 2">
							<text>折扣力度：</text>
								<text style="margin-left: 10px;"><vk-data-input-discount v-model="form[keyName].discount_proportion" :precision="0" width="140px" :clearable="false" placeholder="多少" rightText="折" :disabled="options.mode === 'update'"/></text>
						</view>
					</view>

				</template>


				<!-- 有效期 -->
				<template v-slot:effective_time_rule="{ form, keyName }">
					<view style="color: #606266;">
						<view @click="form[keyName].type=0">
							<el-radio v-model="form[keyName].type" :label="0" style="width: 80px;">固定时间：</el-radio>
							<vk-data-input-date-time v-model="form[keyName].start_fixed_time" type="datetime" :disabled="form[keyName].type != 0"/>
							<text style="margin: 0 5px;">-</text>
							<vk-data-input-date-time v-model="form[keyName].end_fixed_time" type="datetime" :disabled="form[keyName].type != 0"/>
						</view>
						<view style="margin-top: 20px;" @click="form[keyName].type=1">
							<el-radio v-model="form[keyName].type" :label="1" style="width: 80px;">领取：</el-radio>
							<text><vk-data-input-number v-model="form[keyName].start_dynamic_time" :precision="0" width="200px" placeholder="请输入天数" rightText="天" :clearable="false" :disabled="form[keyName].type != 1" /></text>
							<text style="margin-left: 10px;">生效，有效期</text>
							<text style="margin-left: 10px;"><vk-data-input-number v-model="form[keyName].end_dynamic_time" :precision="0" width="200px" placeholder="请输入天数" rightText="天" :clearable="false" :disabled="form[keyName].type != 1" /></text>
						</view>
					</view>
				</template>

				<!-- 领取限制 -->
				<template v-slot:is_public="{ form, keyName }">
					<view style="color: #606266;">
						<view @click="form[keyName]=true">
							<el-radio v-model="form[keyName]" :label="true" style="width: 80px;">限领：</el-radio>
							<text><vk-data-input-number v-model="form.limit" :precision="0" width="150px" placeholder="" rightText="张" :clearable="false" :disabled="form[keyName] != true" /></text>
							<text style="margin-left: 10px;color: #9FA5BB;">填0或不填代表不限制（商家赠送，营销活动赠送不受此限制）</text>
						</view>
						<view style="margin-top: 20px;" @click="form[keyName]=false">
							<el-radio v-model="form[keyName]" :label="false" style="width: 80px;">不可自主领取：</el-radio>
							<text style="margin-left: 10px;color: #9FA5BB;">选择后将不展示在优惠券列表中，只能通过商家后台发放</text>
						</view>
					</view>
				</template>
				<!-- 领取规则 -->
				<template v-slot:receive_rule="{ form, keyName }">
					<view style="color: #606266;">
						<view>
							<el-radio v-model="form[keyName].type" :label="0" style="width: 80px;">所有用户</el-radio>
						</view>
						<view style="margin-top: 10px;">
							<el-radio v-model="form[keyName].type" :label="1" style="width: 80px;">所有会员（Lv>=1）</el-radio>
						</view>
						<view style="margin-top: 10px;" @click="form[keyName].type=2">
							<el-radio v-model="form[keyName].type" :label="2" style="width: 80px;">指定会员等级</el-radio>
							<text style="margin-left: 10px;">
								<vk-data-input-select
									v-model="form[keyName].vip_ids"
									:localdata='vipLvData'
									placeholder="请选择"
									:multiple="true"
									:props="{ value:'lv', label:'name', children:'children' }"
									:clearable="false"
									:disabled="form[keyName].type != 2"
								></vk-data-input-select>
								<!-- <vk-data-input-number v-model="form.limit" :precision="0" width="160px" placeholder="多少(填数字)" rightText="级" :clearable="false" :disabled="form[keyName].type != 2" /> -->
							</text>
						</view>
						<view style="margin-top: 20px;">
							积分
						</view>
						<view style="margin-top: 10px;">
							<el-radio v-model="form[keyName].mode" :label="0" style="width: 80px;">领取无需扣除积分</el-radio>
						</view>
						<view style="margin-top: 10px;">
							<el-radio v-model="form[keyName].mode" :label="1" style="width: 80px;">领取需要扣除</el-radio>
							<text style="margin-left: 10px;">
								<vk-data-input-number v-model="form[keyName].integral" :precision="0" width="160px" placeholder="多少" rightText="积分" :clearable="false" :disabled="form[keyName].mode != 1" />
							</text>
						</view>
					</view>
				</template>



			</vk-data-form>
			<!-- 页面主体内容结束 -->
		</view>
		<view class="page-footer">
			<!-- 页面底部内容开始 -->
			<el-button :loading="formData1.loading" type="primary" style="width: 80px;" @click="submitForm">{{ page.submitText }}</el-button>
			<el-button plain style="margin-left: 20px;width: 80px;" @click="pageBack">返回</el-button>
			<!-- 页面底部内容开始 -->
		</view>
		<view class="page-dialog">
			<!-- 页面弹窗内容开始 -->

			<!-- 页面弹窗内容开始 -->
		</view>
	</view>
</template>

<script>
	var that;													// 当前页面对象
	var vk = uni.vk;									// vk实例
	var originalForms = {};						// 表单初始化数据
	var typeData = vk.getVuex('$app.config.maill.coupon.type');
	var vipLvData = vk.getVuex("$user.mchInfo.vip_level_rule");
	// action路径目录
	const actionPath = "admin/business/sys/coupon.";
	const pageName = "优惠券";
	var defaultFormData = {
		status:1,
		type:1,
		allow_share:false,
		allow_give:false,
		only_original_price_use:true,
		is_public:true,
		coupon_rule:{
			min_amount:"",
			discount_amount:"",
			discount_proportion:"",
			amount_range:"",
			exchange_type:"",
			exchange_buy_goods_id:"",
			exchange_goods_id:"",
			voucher_amount:"",
			describe:"",
			available_count:"",
		},
		available_range_rule:{
			type:0,
			goods_type:1,
			category_ids:[],
			goods_ids:[]
		},
		effective_time_rule:{
			type:0,
			start_fixed_time:"",
			end_fixed_time:"",
			start_dynamic_time:"",
			end_dynamic_time:"",
		},
		receive_rule:{
			type:0,
			vip_ids:[],
			mode:0,
			integral:null
		}
	};
	export default {
		data() {
			// 页面数据变量
			return {
				vipLvData,
				// 页面配置数据
				page:{
					title:"",
					submitText:"",
				},
				// 表单请求数据
				form1:{
					...defaultFormData
				},
				formData1:{
					// 表单请求地址
					action: actionPath + "addUpdate",
					// 表单字段显示规则
					columns:[
						{ key:"", title:"基础信息", type:"bar-title" },
						{
							key:"status", title:"优惠券状态", type:"radio",
							optionType:"button",
							data:[
								{ value:0, label:"下架" },
								{ value:1, label:"上架" }
							],
							tips:"优惠券下架不影响已发放的优惠券的使用"
						},
						{ key:"name", title:"优惠券标题", type:"text", width:400, maxlength:20, showWordLimit:true, tips:"建议填写“10元代金券”、“8折券”等易于理解的具体优惠内容，限20个字以内" },
						{ key:"stock", title:"库存（张）", type:"number", width:220, rightText:"张" },
						{ key:"is_public", title:"领取限制", type:"switch", width:100, activeValue:true, inactiveValue:false },
						{ key:"", title:"优惠券类型", type:"bar-title" },
						{ key:"type", title:"优惠券类型", type:"radio", itemWidth:100,
							data:[
								{ value:1, label:"满减券" }, // 已支持
								{ value:2, label:"折扣券" }, // 已支持
							],
							disabled:()=>{
								return this.options.mode === "update";
							}
						},
						{ key:"coupon_rule", title:"优惠规则", type:"text", width:100, showLabel:false,
							disabled:()=>{
								return this.options.mode === "update";
							}
						}, // 插槽实现
						{ key:"", title:"可用范围规则", type:"bar-title" },
						{ key:"available_range_rule", title:"", type:"object", width:100, showLabel:false,
							columns:[
								{
									key:"type", title:"状态", type:"radio",
									data:[
										{ value:0, label:"全部商品可用" },
										{ value:1, label:"指定商品可用" },
										{ value:2, label:"指定商品不可用" }
									]
								},
								{
									key:"goods_type", title:"指定类型", type:"radio",
									data:[
										{ value:0, label:"指定分类" },
										{ value:1, label:"指定商品" },
									],
									showRule:(formData)=>{
										return formData.available_range_rule.type > 0;
									}
								},
								{
									key:"category_ids", title:"商品分类", type:"cascader", width:400,
									action:"admin/business/sys/goodsCategory.kh_getList",
									props:{
										list:"rows",
										value:"_id",
										label:"name",
										children:"children",
										checkStrictly:true,
										emitPath:false,
										multiple:true
									},
									showRule:(formData)=>{
										return formData.available_range_rule.goods_type == 0 && formData.available_range_rule.type > 0;
									},
								},

								{
									key: "goods_ids", title: "选择商品", type: "table-select", placeholder:"请选择商品", showRule:"type>0",
									action:"admin/business/sys/goods.getList",
									multiple:true,
									formData:{
										status:1
									},
									columns:[
									 { key:"goods_thumb", title:"商品图", type:"avatar", imageWidth:40 },
									 { key:"name", title:"商品名称", type:"text", width:160, align:"left" },
									 { key:"categoryList", title:"所属分类", type:"text", width:140, defaultValue:'暂无',
										formatter: (val, row, column, index) => {
											let str = "";
											val.map((item, index) => {
												if (index > 0) str += "、";
												str += item.name;
											});
											return str;
										}
									 },
									 { key:"sku_list", title:"价格区间", type:"text", width:200, defaultValue:'暂无' ,
										formatter:(val, row, column, index) => {
											let a = [];
											val.map((item, index) => {
												a.push(Number(item.price))
											});
											let max = Math.max(...a);
											let min = Math.min(...a);
											if(max != min){
												// 如果最大值和最小值不相等
												return	vk.pubfn.priceFilter(min) +' - '+ vk.pubfn.priceFilter(max);
											}else{
												// 如果最大值和最小值相等
												return  vk.pubfn.priceFilter(min);
											}
										}
									 },
									 { key: "stock", title: "商品库存", type: "number", width: 110, show:["row"]  },
									],
									queryColumns:[
										{ key: "name", type: "text", title:"商品名称", placeholder:"请输入商品名称", width:220, mode:"%%" },
										{
											key:"category_ids", title:"商品分类", type:"cascader", width:250, mode:"in",
											action:"admin/business/sys/goodsCategory.kh_getList",
											props:{
												list:"rows",
												value:"_id",
												label:"name",
												children:"children",
												checkStrictly:true,
												emitPath:false
												// multiple:true
											}
										},
										{ key: "_id", title: "角色标识", type: "text", width: 150, mode: "%%", show:false }
									],
									showRule:(formData)=>{
										return formData.available_range_rule.goods_type == 1 && formData.available_range_rule.type > 0;
									},
								}
							]
						},

						{ key:"", title:"领取时间", type:"bar-title" },
						{ key:"receive_start_time", title:"最早可领取时间", type:"date", dateType:"datetime", width:220 },
						{ key:"receive_end_time", title:"最晚可领取时间", type:"date", dateType:"datetime", width:220 },
						{ key:"", title:"有效期", type:"bar-title" },
						{ key:"effective_time_rule", title:"有效期", type:"text" },// 插槽实现
						{ key:"", title:"领取规则", type:"bar-title" },
						{ key:"receive_rule", title:"领取规则", type:"text", showRule:"is_public==true" }, // 插槽实现
						// { key:"", title:"分享", type:"bar-title" },
						// { key:"allow_share", title:"允许用户分享", type:"switch", width:100, activeValue:true, inactiveValue:false },
						// { key:"share_info", title:"分享信息", type:"object", showLabel:false,
						// 	columns:[
						// 		{ key:"title", title:"分享标题", type:"text", width:400 },
						// 		{ key:"image", title:"封面图", type:"image", limit:1 },
						// 	],
						// 	showRule:"allow_share==true"
						// },
						{ key:"", title:"其他规则", type:"bar-title" },
						//{ key:"allow_give", title:"允许用户赠送", type:"switch", width:100, activeValue:true, inactiveValue:false },
						{ key:"only_original_price_use", title:"仅原价购买可用", type:"switch", width:110, activeValue:true, inactiveValue:false, tips:"开启后，用户使用该优惠券不可与其他优惠叠加。" },
						{
							key:"describe", title:"使用说明", type:"textarea", width:600,
							autosize:{ minRows:4, maxRows:10 },
							maxlength:200,
							showWordLimit:true,
						},

						{ key:"", title:"其他", type:"bar-title" },
						{
							key:"remark", title:"商家备注", type:"textarea", width:600,
							autosize:{ minRows:4, maxRows:10 },
							maxlength:200,
							showWordLimit:true,
						},

					],
					// 表单验证规则
					rules:{
						name: [
							// 必填
							{ required: true, message: "优惠券标题不能为空", trigger: ['blur','change'] }
						],
						stock: [
							// 必填
							{ type:"number", min:0, required: true, message: "优惠券库存必须>0", trigger: ['blur','change'] }
						],
						type: [
							// 必填
							{ type:"number", required: true, message: "优惠券类型不可为空", trigger: ['blur','change'] }
						],
						"coupon_rule": [
							// 自定义
							{ validator: (rule, value, callback)=>{
								let { form1={} } = this;
								if (form1.type === 1) {
									if (value.discount_amount <= 0) {
										callback(new Error('优惠金额错误，必须>0'));
									}
								} else if (form1.type === 2) {
									if (value.discount_proportion <= 0 || value.discount_proportion >= 1) {
										callback(new Error('折扣错误，必须在0折和10折之间'));
									}
								}
								callback();
							}, trigger: ['blur','change'] }
						],
					},
					// add 代表添加 update 代表修改
					formType:'',
					// 是否显示表单1 的弹窗
					show:false,
					// 表单是否请求中
					loading:false,
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				if(options.mode === "update"){
					that.page.title = pageName + "编辑";
					that.page.submitText = "修改";
					vk.callFunction({
						url: actionPath+"find",
						title:'请求中...',
						data:{
							_id:options._id
						},
						success:function(data) {
							let formData = vk.pubfn.copyObject(defaultFormData);
							that.form1 = vk.pubfn.objectAssign(formData, data.info);
							originalForms["form1"] = vk.pubfn.copyObject(that.form1);
						}
					});
				}else{
					that.page.title = pageName + "添加";
					that.page.submitText = "添加";
					originalForms["form1"] = vk.pubfn.copyObject(defaultFormData);
					const eventChannel = this.getOpenerEventChannel();
					// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
					if (eventChannel.on) {
						eventChannel.on('data', (data) => {
							let formData = vk.pubfn.copyObject(defaultFormData);
							that.form1 = vk.pubfn.objectAssign(formData, data);
							originalForms["form1"] = vk.pubfn.copyObject(that.form1);
						});
					}
				}
			},
			// 页面跳转
			pageTo(path){
				vk.navigateTo(path);
			},
			// 页面返回
			pageBack(){
				const pages = getCurrentPages();
				if (pages.length>1 && pages[0].route !== that.$page.route) {
					vk.navigateBack();
				} else {
					vk.navigateTo('list');
				}
			},
			// 表单重置
			resetForm(){
				vk.pubfn.resetForm(originalForms, that);
			},
			// 表单提交
			submitForm(){
				that.form1.mode = that.options.mode;
				that.$refs.form1.submitForm();
			},
			formSuccess(res){
				that.$alert(res.data.msg, '提示', {
					confirmButtonText: '确定',
					callback: action => {
						vk.navigateTo("list");
					}
				});
			}
		},
		// 监听属性
		watch: {

		},
		// 计算属性
		computed:{

		}
	}
</script>
<style lang="scss" scoped>
	.page{

	}
</style>
